<template>
  <el-card>
    <div style="font-weight: bold; font-size: 25px">质检详情</div>
  </el-card>

  <el-card class="quality-detail-card">
    <!-- 顶部信息栏 -->
    <div class="top-bar flex justify-between items-center">
      <div>
        <h2 class="title-text">{{ qualityDetail.quaworkname }}</h2>
        <p class="meta-text">
          创建人: {{ qualityDetail.qualityUsername }}; 创建时间:
          {{ formatTime(qualityDetail.createtime) }}; 最后修改人:
          {{ qualityDetail.qualityUsername }}; 修改时间:
          {{ formatTime(qualityDetail.updatetime) }}
        </p>
      </div>
      <div
        class="status-stamp"
        :class="
          qualityDetail.status === 0 ? 'status-incomplete' : 'status-complete'
        "
      >
        {{ qualityDetail.status === 0 ? "未完成" : "已完成" }}
      </div>
    </div>
  </el-card>

  <el-card class="quality-detail-card">
    <el-tabs v-model="activeTab" class="mt-4">
      <el-tab-pane
        label="工单信息"
        name="workorder"
        @click="router.push('/qualityorder')"
      >
        <div class="section-title">◆ 基础信息</div>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">质检工单编号：</span>
            <span>{{ qualityDetail.quaworkcode }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">质检工单主题：</span>
            <span>{{ qualityDetail.quaworkname }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">来源工单：</span>
            <span>{{ qualityDetail.workCode }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">生产产品：</span>
            <span>{{ qualityDetail.goodsname }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">质检负责人：</span>
            <span>{{ qualityDetail.qualityUsername }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">工序数量：</span>
            <span>{{ qualityDetail.processcount }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">报工次数：</span>
            <span>{{ qualityDetail.reportingcount }}</span>
          </div>
          <div class="info-item" style="grid-column: 1 / 3">
            <span class="info-label">备注：</span>
            <span>{{ qualityDetail.meeage }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="质检报工" name="workop">
        <div class="toolbar">
          <el-button size="small">导出</el-button>
          <el-input
            v-model="searchKeyword"
            placeholder="请输入"
            size="small"
            style="width: 200px; margin-left: auto"
          >
            <template #suffix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <!-- 工序报工列表表格 -->
        <el-table
          :data="reportList"
          stripe
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="processCode" label="工序编号" />
          <el-table-column prop="processName" label="工序名称" />
          <el-table-column prop="processOrder" label="工序顺序" />
          <el-table-column prop="equipmentName" label="加工设备" />
          <el-table-column prop="workstationName" label="工艺流程" />
          <el-table-column prop="principalName" label="负责人" />
          <el-table-column prop="departmentName" label="所在部门" />
          <el-table-column prop="reportingTime" label="报工" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="text" size="small" @click="viewReport(scope.row)"
                >质检</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="deleteReport(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          v-model:current-page="reportPage.PageIndex"
          v-model:page-size="reportPage.PageSize"
          :page-sizes="[5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="reportPage.totalcount"
          background
          style="margin-top: 20px; justify-content: center"
        />
      </el-tab-pane>
      <el-tab-pane label="质检记录" name="record"></el-tab-pane>
      <el-tab-pane label="操作记录" name="operation"></el-tab-pane>
    </el-tabs>
    <div class="footer-button">
      <el-button @click="close">关闭</el-button>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  ElButton,
  ElTabs,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElInput,
  ElIcon,
} from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import myaxios from "@/Http/http";

const router = useRouter();
const activeTab = ref("workorder");
const searchKeyword = ref("");

// 质检详情数据
const qualityDetail = ref({
  quaworkcode: "",
  quaworkname: "",
  workCode: "",
  goodsname: "",
  department: "",
  qualityUsername: "",
  processcount: 0,
  reportingcount: 0,
  meeage: "",
  status: 0,
  createUsername: "",
  createtime: "",
  updateUsername: "",
  updatetime: "",
});

// 报工列表数据
const reportList = ref([]);

// 报工分页参数
const reportPage = ref({
  PageIndex: 1,
  PageSize: 5,
  totalcount: 0,
});

// 获取质检详情
const getQualityDetail = () => {
  const id = localStorage.getItem("qualityid");
  if (!id) {
    console.error("缺少质检工单ID");
    return;
  }

  myaxios
    .get("/api/Quality/FindQuality?Id=" + id)
    .then((res) => {
      if (res.data.code === 200) {
        qualityDetail.value = res.data.result;
      }
    })
    .catch((err) => {
      console.error("获取质检详情失败：", err);
    });
};

// 获取报工列表
const getReportList = () => {
  const id = localStorage.getItem("qualityid");
  if (!id) return;

  myaxios
    .get("/api/Quality/GetReportList", {
      params: {
        qualityId: id,
        PageIndex: reportPage.value.PageIndex,
        PageSize: reportPage.value.PageSize,
        keyword: searchKeyword.value,
      },
    })
    .then((res) => {
      if (res.data.code === 200) {
        reportList.value = res.data.listResult || [];
        reportPage.value.totalcount = res.data.totalcount || 0;
      }
    })
    .catch((err) => {
      console.error("获取报工列表失败：", err);
    });
};

// 查看报工
const viewReport = (_row: any) => {
  console.log("查看报工：", _row);
};

// 删除报工
const deleteReport = (_row: any) => {
  console.log("删除报工：", _row);
};

const close = () => {
  router.push("/qualitylist");
  localStorage.removeItem("qualityid");
};

// 组件内局部时间格式化函数
const formatTime = (timeStr: any) => {
  if (!timeStr) return "暂无"; // 空值兜底
  // 处理带 T、带毫秒的格式（如 "2025-11-18T19:51:12.123"）
  return timeStr.split(".")[0].replace("T", " ");
};

onMounted(() => {
  getQualityDetail();
  getReportList();
});
</script>

<style scoped>
.quality-detail-card {
  width: 80%;
  margin: 15px;
}

.page-title {
  font-weight: bold;
  font-size: 18px;
}

.section-title {
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  font-weight: bold;
  margin-right: 5px;
}

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 10px;
}

.attachment-item {
  border: 1px solid #e5e7eb;
  padding: 10px;
  border-radius: 4px;
}

.attachment-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.attachment-info {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.attachment-buttons {
  margin-top: 10px;
}

.footer-button {
  text-align: center;
  margin-top: 20px;
}

.status-stamp {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid;
  transition: all 0.3s ease;
}

.status-incomplete {
  background-color: #fef6e6;
  color: #e6a23c;
  border-color: #fdf0d7;
}

.status-complete {
  background-color: green;
  color: green;
  border-color: green;
}
.status-stamp {
  position: relative; /* 为伪元素定位做准备 */
}
.status-stamp::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: -2px;
  bottom: -2px;
  border: 2px dashed #ddd;
  border-radius: 6px;
  transform: rotate(1deg);
  z-index: -1;
  opacity: 0.8;
}

.top-bar {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.meta-text {
  font-size: 12px;
  color: #666;
  margin: 5px 0 0 0;
}

.status-stamp {
  font-size: 14px;
  color: #999;
  border: 2px dashed #999;
  border-radius: 4px;
  padding: 5px 10px;
  transform: rotate(5deg);
  display: inline-block;
}

.toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
</style>
